<template>
  <div class="navbar">
    <!-- 头部信息栏 -->
    <div class="top-bar">
      <!-- 左图片 -->
      <div class="img">
        <router-link to="/app/index">
          <img src="../../assets/Logo.jpg" alt=""
        /></router-link>
        <div class="title">YongChuangJie Electronics Co., LTD</div>
        <div class="title1">永创杰电子</div>
      </div>
      <div class="title2">ZhiCheng Tech Electronics Co.,LTD( HK Branch)</div>
      <!-- 右部分 -->
      <div class="right">
        <div class="language">
          <a href="javascript:;" @click="handleSetLanguage('zh')">
            <h5>中文 |&nbsp;</h5>
          </a>

          <a href="javascript:;" @click="handleSetLanguage('en')">
            <h5>Eng ver.</h5>
          </a>
        </div>
        <div class="b-e">
          <spen class="number">
            <h6>+86 (0755)23907721</h6>
          </spen>
          <spen class="email">
            <h6>yongchun@szycjdz.com</h6>
          </spen>
        </div>

        <div class="other">
          <input type="text" v-model="searchVal" /><button
            @click="searchGo(searchVal)"
          >
            {{ $t("msg.navbar.search") }}</button
          ><button>
            <router-link to="/app/lj">
              {{ $t("msg.navbar.findParts") }}
            </router-link>
          </button>
          <button>
            <router-link to="/app/dl">
              {{ $t("msg.navbar.sendExcessList") }}</router-link
            >
          </button>
        </div>
      </div>
    </div>
    <!-- 头部导航栏 -->
    <div class="NavLan">
      <ul class="navHead">
        <!-- 首页 -->
        <li @click="goPath('/app/index')">
          <router-link to="/app/index">
            {{ $t("msg.navbar.home") }}</router-link
          >
        </li>
        <span>|</span>
        <!-- 关于我们 -->
        <li>
          <router-link to="/app/about">{{
            $t("msg.navbar.aboutUs")
          }}</router-link>

          <ul>
            <li @click="goPath('/app/about')">
              <router-link to="/app/about">
                {{ $t("msg.navbar.children.aboutA") }}</router-link
              >
            </li>
            <li @click="goPath('/app/fzlc')">
              <router-link to="/app/fzlc">
                {{ $t("msg.navbar.children.aboutB") }}</router-link
              >
            </li>
            <li @click="goPath('/app/wh')">
              <router-link to="/app/wh">
                {{ $t("msg.navbar.children.aboutC") }}</router-link
              >
            </li>
            <li @click="goPath('/app/ys')">
              <router-link to="/app/ys">
                {{ $t("msg.navbar.children.aboutD") }}</router-link
              >
            </li>
            <li @click="goPath('/app/zy')">
              <router-link to="/app/zy">
                {{ $t("msg.navbar.children.aboutE") }}</router-link
              >
            </li>
          </ul>
        </li>
        <span>|</span>
        <!-- 产品  -->
        <li>
          <router-link to="/app/products">{{
            $t("msg.navbar.products")
          }}</router-link>
          <ul>
            <li @click="goPath('/app/products')">
              <router-link to="/app/products">{{
                $t("msg.navbar.children.productsA")
              }}</router-link>
            </li>
            <!-- <li @click="goPath('/app/sq')">
              <router-link to="/app/sq">{{
                $t("msg.navbar.children.productsB")
              }}</router-link>
            </li> -->
          </ul>
        </li>
        <span>|</span>
        <!-- 服务 -->
        <li>
          <router-link to="/app/service">{{
            $t("msg.navbar.service")
          }}</router-link>
          <ul>
            <li>
              <router-link to="/app/service">
                {{ $t("msg.navbar.children.serviceA") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/fw1">
                {{ $t("msg.navbar.children.serviceB") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/fw2">
                {{ $t("msg.navbar.children.serviceC") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/fw3">
                {{ $t("msg.navbar.children.serviceD") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/fw4">
                {{ $t("msg.navbar.children.serviceE") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/lj">
                {{ $t("msg.navbar.children.serviceF") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/dl">
                {{ $t("msg.navbar.children.serviceG") }}</router-link
              >
            </li>
          </ul>
        </li>
        <span>|</span>
        <!-- 服务项目 -->
        <li>
          <router-link to="/app/news">{{ $t("msg.navbar.news") }}</router-link>
          <ul>
            <li>
              <router-link to="/app/news">
                {{ $t("msg.navbar.children.newsA") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/dt">
                {{ $t("msg.navbar.children.newsB") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/pzcn">
                {{ $t("msg.navbar.children.newsC") }}</router-link
              >
            </li>
          </ul>
        </li>
        <span>|</span>
        <!-- 品质 -->
        <li>
          <router-link to="/app/quality">{{
            $t("msg.navbar.quality")
          }}</router-link>
          <ul>
            <li>
              <router-link to="/app/quality">
                {{ $t("msg.navbar.children.qualityA") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/gl">
                {{ $t("msg.navbar.children.qualityB") }}</router-link
              >
            </li>
            <li>
              <router-link to="/app/lc">
                {{ $t("msg.navbar.children.qualityC") }}</router-link
              >
            </li>
          </ul>
        </li>
        <!-- 联系我们 -->
        <span>|</span>
        <li @click="goPath('/app/contents')">
          <router-link to="">{{ $t("msg.navbar.contents") }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
// 搜索
let searchVal = ref("");
const searchGo = (val) => {
  router.push({
    path: "/search",
    query: {
      contentVal: JSON.stringify(val),
    },
  });
};
// 使用路由
let router = useRouter();
const goPath = (path) => {
  // 参数路径跳转
  router.push(path);
  console.log(path);
};

// 语言切换
const store = useStore();
// const language = computed(() => store.getters.language);
// console.log(language.value);
// 切换语言的方法
const i18n = useI18n();
const handleSetLanguage = (lang) => {
  // console.log(lang);
  i18n.locale.value = lang;
  store.commit("app/setLanguage", lang);
};
</script>

<style lang="scss" scoped>
a {
  color: #fff;
}
.navbar {
  position: relative;
  width: 100%;
  height: 100%;
  .top-bar {
    margin: 30px auto;
    width: 1000px;
    height: 100px;
    .img {
      margin-top: -40px;
      float: left;
      width: 300px;
      height: 140px;
      background-color: #262173;
      img {
        width: 100%;
        height: 100%;
      }
      .title {
        color: #000;
        font-weight: 600;
        margin-top: -8px;
        text-align: center;
        font-size: 15px;
      }
      .title1 {
        color: #000;
        font-size: 18px;
        font-weight: 600;
        margin-top: -60px;
        text-align: center;
      }
    }
    .title2 {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -30%);
      color: #000;
      font-weight: 600;
      text-align: center;
      font-size: 15px;
    }
    .right {
      // background-color: antiquewhite;
      display: flex;
      align-items: flex-end;
      // width: 600px;
      height: 100px;
      flex-direction: column;
      justify-content: space-around;
      .language {
        // width: 130px;
        a {
          float: left;
          font-size: 12px;
          color: #555555;
        }
      }
      .b-e {
        .number {
          float: left;
          font-size: 12px;
          padding-right: 30px;
          color: #555555;
        }
        .email {
          float: left;
          font-size: 12px;
          color: #555555;
        }
      }
      .other {
        input {
          outline: none;
          border: 1px solid rgb(171, 164, 164);
          background-color: #efefef;
          width: 250px;
          height: 25px;
        }
        button:nth-child(2) {
          background-color: #4577ba;
          width: 60px;
          height: 25px;
          margin-left: 20px;
          border: #fff;
          color: #fff;
          font-size: 6px;
        }
        button:nth-child(3) {
          background-color: #f18612;
          // width: 90px;
          margin-left: 20px;
          font-size: 6px;
          height: 25px;
          border: #fff;
          color: #fff;
        }
        button:nth-child(4) {
          background-color: #f18612;
          font-size: 2px;
          height: 25px;
          border: #fff;
          // width: 60px;
          color: #fff;
          margin-left: 20px;
        }
      }
    }
  }

  .NavLan {
    background-color: #120d66;
    width: 100%;
    height: 45px;
    .navHead {
      line-height: 45px;
      width: 1000px;
      margin: 0 auto;
      color: #fff;
      display: flex;
      position: relative;
      // justify-content: space-evenly;
      li {
        width: 125px;
        height: 46px;
        overflow: hidden;
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #fff;
        float: left;
        line-height: 46px;
        cursor: pointer;
        &:hover {
          a {
            color: #4577ba;
          }
          ul {
            z-index: 99;
            position: absolute;
            box-shadow: 0 0 10px 1px #bab6b6;
            width: 125px;
            top: 40px;
            li {
              font-size: 10px;
              font-weight: 540;
              height: 35px;
              line-height: 35px;
              color: #262173;
              background-color: #fff;
              &:hover {
                a {
                  color: #120d66;
                }
                background-color: #e9e7f9;
              }
            }
          }
        }
      }
    }

    span {
      color: #4f47cc;
    }
  }
}
</style>
